<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <h3>dshsjah(安全组)</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <div style="padding:20px">
            <el-form-item label="名称">
              <div>sg-15ef</div>
            </el-form-item>
            <el-form-item label="名称">
              <div>cd814a17-13ed-4288-9753-38c6b04da79e</div>
            </el-form-item>
            <el-form-item label="描述">
              <div class="w440">
                您可以勾选常见协议端口，在入方向快速添加规则放通对应的协议及端口。若您未勾选任何协议端口，则不会放通任何端口。您可在安全组创建后，根据实际访问需求添加或修改安全组规则。
              </div>
            </el-form-item>
          </div>
        </el-tab-pane>

        <el-tab-pane label="入方向规则" name="second">
          <listPage
            ref="listPageRef"
            :btnList="btnList"
            :addBtnList="addBtnList"
            :tableData="tableData"
            :allColumn="tableColumn"
            :tableColumn="showColumn"
            @setColumn="
              val => {
                showColumn = val;
              }
            "
          >
          </listPage>

        </el-tab-pane>
        <el-tab-pane label="出方向规则" name="third">
          <listPage
            ref="listPageRef"
            :btnList="btnList"
            :addBtnList="addBtnList"
            :tableData="tableData"
            :allColumn="tableColumn"
            :tableColumn="showColumn2"
            @setColumn="
              val => {
                showColumn = val;
              }
            "
          >
          </listPage>
       
        </el-tab-pane>
        <el-tab-pane label="关联实例" name="fourth">
          <listPage
            ref="listPageRef"
            :btnList="btnList2"
            :addBtnList="addBtnList"
            :tableData="tableData3"
            :allColumn="tableColumn3"
            :tableColumn="showColumn3"
            @setColumn="
              val => {
                showColumn = val;
              }
            "
          >
          </listPage>
          <pdlog
          v-model="showRelate"
          width="423px"
          title="添加规则"
          @comfirm="showRelate = false"
          @cencel="showRelate = false"
        >
        
          <div class="edit-dialog">
            <div class="name">实例类型</div>
            <div class="w233">
              <el-select
                size="small"
                v-model="editValue8"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options8"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="edit-dialog">
            <div class="name"></div>
            <div class="w233">
              <el-select
                size="small"
                v-model="editValu9"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options9"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          

        
        </pdlog>
          
        </el-tab-pane>
      </el-tabs>
                <!-- 添加规则 -->
                <pdlog
                v-model="showrule"
                width="818px"
                title="添加规则"
                @comfirm="showrule = false"
                @cencel="showrule = false"
              >
                <div class="edit-dialog">
                  <div class="name">优先级</div>
                  <el-input
                    class="w233"
                    size="small"
                    v-model="editValue1"
                    placeholder="请输入1-100"
                  ></el-input>
                </div>
                <div class="edit-dialog">
                  <div class="name">策略</div>
                  <div class="w233">
                    <el-select
                      size="small"
                      v-model="editValue2"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
    
                <div class="edit-dialog">
                  <div class="name">类型</div>
                  <div class="w233">
                    <el-select
                      size="small"
                      v-model="editValue3"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
                <div class="edit-dialog">
                  <div class="name">协议端口</div>
                  <div class="w233">
                    <el-select
                      size="small"
                      v-model="editValue5"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options5"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <el-input
                    class="w233"
                    style="margin-left:10px"
                    size="small"
                    v-model="editValue4"
                    placeholder="选自定义显示"
                  ></el-input>
                </div>
                <div class="edit-dialog">
                  <div class="name">源地址</div>
                  <div class="w233">
                    <el-select
                      size="small"
                      v-model="editValue6"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options6"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <el-input
                    class="w233"
                    style="margin-left:10px"
                    size="small"
                    v-model="editValue7"
                    placeholder="请输入"
                  ></el-input>
                </div>
    
                <div class="edit-dialog">
                  <div class="name w68">描述</div>
                  <el-input
                    class="w440"
                    type="textarea"
                    :autosize="{ minRows: 4 }"
                    v-model="editValue"
                    placeholder="请输入"
                  ></el-input>
                </div>
              </pdlog>
          
              <!-- 删除弹窗 -->
              <pdlog
                v-model="showDelete"
                width="418px"
                title="删除"
                @comfirm="showDelete = false"
                @cencel="showDelete = false"
              >
                <div class="btn-msg">
                  请确认是否对“bms-001/dshjssd、bms-001/dshjssd”规则进行删除？
                </div>
              </pdlog>
    </pform>
  </div>
</template>

<script>
import listPage from "@/components/listPage";
// import pform from '@/components/publicForm.vue'
export default {
  components: {
    listPage
  },
  // components:{pform},
  data() {
    return {
      activeName: "first",
      tipName: "",
      showTip: false,
      showrule: false,
      showrule2: false,
      showDelete: false,
      showRelate: false,
      options: [
        {
          value: "1",
          label: "允许"
        },
        {
          value: "2",
          label: "拒绝"
        }
      ],
      options3: [
        {
          value: "1",
          label: "IPv4"
        },
        {
          value: "2",
          label: "IPv6"
        }
      ],
      options5: [
        {
          value: "1",
          label: "全部TCP"
        },
        {
          value: "2",
          label: "全部UDP"
        },
        {
          value: "3",
          label: "ICMP"
        },
        {
          value: "4",
          label: "SSH"
        },
        {
          value: "5",
          label: "自定义"
        }
      ],
      options6: [
        {
          value: "1",
          label: "IP地址"
        },
        {
          value: "2",
          label: "安全组"
        },
        {
          value: "3",
          label: "地址组"
        }
      ],
      options8: [
        {
          value: "1",
          label: "物理机"
        },
        {
          value: "2",
          label: "虚拟机"
        },
      
      ],
      options9: [
        {
          value: "1",
          label: "实例名称"
        },
        {
          value: "2",
          label: "展示可选的所有"
        },
        
      ],

      editValue: null, // 编辑值
      editValue1: null, // 编辑值
      editValue2: null, // 编辑值
      editValue3: null, // 编辑值
      editValue4: null, // 编辑值
      editValue5: null, // 编辑值
      editValue6: null, // 编辑值
      editValue7: null, // 编辑值
      editValue8: null, // 编辑值
      editValue9: null, // 编辑值
      btnList: [
        {
          id: 1,
          name: "添加规则",
          handle: () => this.btnhandleClick("添加规则")
        },
        {
          id: 2,
          name: "删除",
          handle: () => this.btnhandleClick("删除")
        }
      ],
   
      btnList2: [
        {
          id: 1,
          name: "关联",
          handle: () => this.btnhandleClick("关联")
        },
        {
          id: 2,
          name: "解绑",
          handle: () => this.btnhandleClick("解绑")
        }
      ],

      showLog: false, // 控制台弹窗
      logValue: null, // 控制台值
      editValue: null, // 编辑值
      showEdit: false, // 编辑弹窗
      showColumn: [], // 展示列
      showColumn2: [], // 展示列
      showColumn3: [], // 展示列
      tableColumn: [
        {
          field: "name",
          label: "优先级"
        },
        {
          field: "safe",
          label: "策略"
        },
        {
          field: "link",
          label: "类型",
          sortable: true
        },
        {
          field: "descriptive",
          label: "协议端口"
        },
        {
          field: "creat",
          label: "源地址",
          sortable: true
        },
        {
          field: "describe",
          label: "描述",
          sortable: true
        },
        {
          field: "time",
          label: "修改时间",
          sortable: true
        },
        {
          field: "operation",
          type: "handler",
          label: "操作",
          btnlist: [
            {
              name: "修改",
              handle: this.handleAddPhysical
            }
          ]
        }
      ],
      tableColumn2: [
        {
          field: "name",
          label: "优先级"
        },
        {
          field: "safe",
          label: "策略"
        },
        {
          field: "link",
          label: "类型",
          sortable: true
        },
        {
          field: "descriptive",
          label: "协议端口"
        },
        {
          field: "creat",
          label: "目的地址",
          sortable: true
        },
        {
          field: "describe",
          label: "描述",
          sortable: true
        },
        {
          field: "time",
          label: "修改时间",
          sortable: true
        },
        {
          field: "operation",
          type: "handler",
          label: "操作",
          btnlist: [
            {
              name: "修改",
              handle: this.handleAddPhysical
            }
          ]
        }
      ],
      tableColumn3: [
        {
          field: "name",
          label: "名称"
        },
        {
          field: "safe",
          label: "类型"
        },
        {
          field: "link",
          label: "状态",
          sortable: true
        },
        {
          field: "descriptive",
          label: "私有IP地址"
        }
      ],
      tableData: [],
      tableData3: []
    };
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      this.showColumn = this.tableColumn;
      this.showColumn2 = this.tableColumn2;
      this.showColumn3 = this.tableColumn3;
      setTimeout(() => {
        this.tableData = [
          {
            name: "1",
            safe: "允许",
            link: "IPv4",
            descriptive: "全部",
            creat: "sg-15ef",
            describe: "132GIB",
            time: "13.32.1.1"
          },
          {
            name: "2",
            safe: "允许",
            link: "IPv4",
            descriptive: "22",
            creat: "0.0.0./0",
            describe: "132GIB",
            time: "13.32.1.1"
          },
          {
            name: "3",
            safe: "允许",
            link: "IPv4",
            descriptive: "32",
            creat: "0.0.0./0",
            describe: "132GIB",
            time: "13.32.1.1"
          },
          {
            name: "4",
            safe: "允许",
            link: "IPv4",
            descriptive: "21",
            creat: "0.0.0./0",
            describe: "132GIB",
            time: "13.32.1.1"
          },
          {
            name: "5",
            safe: "允许",
            link: "IPv46",
            descriptive: "11",
            creat: "0.0.0./0",
            describe: "132GIB",
            time: "13.32.1.1"
          }
        ];
        this.tableData3 = [
          {
            name: "1",
            safe: "IPv4",
            link: "全部",
            descriptive: "sg-15ef"
          },
          {
            name: "1",
            safe: "IPv4",
            link: "全部",
            descriptive: "sg-15ef"
          },
          {
            name: "1",
            safe: "IPv6",
            link: "32",
            descriptive: "0.0.0./0"
          },
          {
            name: "1",
            safe: "IPv4",
            link: "21",
            descriptive: "0.0.0./0"
          },
          {
            name: "1",
            safe: "IPv4",
            link: "11",
            descriptive: "0.0.0./0"
          }
        ];
      }, 1000);
    },
    handleAddPhysical() {
      this.showrule = true;
    },
    btnhandleClick(msg) {
      if (msg === "添加规则") {
        this.showrule = true;
      }
    

      if (msg === "删除") {
        this.showDelete = true;
      }
  
      if (msg === "解绑") {
        this.showDelete = true;
      }
      if (msg === "关联") {
        this.showRelate = true;
      }
    }
  }
};
</script>

<style scoped lang="less">
.role-desbox {
  width: 932px;
  min-height: 125px;

  .escplasin {
    font-size: 12px;
    color: #aaaaaa;
  }

  .esclist {
    height: 50px;
    display: flex;
    align-items: center;

    .e-item {
      color: #333333;
      width: 160px;
      text-align: center;
    }
    .e-item-2 {
      display: flex;
      flex-flow: column nowrap;
      div {
        height: 25px;
        line-height: 25px;
      }
    }
  }

  .esclist-t {
    height: 35px;
    background-color: rgba(242, 242, 242, 1);
  }
}
.edit-dialog {
  margin: 0px 20px 10px;
  display: flex;
  align-items: center;
  .name {
    font-weight: 650;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    margin-right: 35px;
    min-width: 80px;
  }
  .el-input {
    width: 233px;
  }
}
</style>
